<template>
  <p :class="{'active':isUsed,'text-danger':hasError}">样式绑定1</p><!--添加了样式,可以绑定多个值-->
  <p :class="object">样式绑定2</p><!--添加了样式,可以绑定多个值-->
  <p :class="[arrActive]">样式绑定3</p><!--添加了样式,可以绑定多个值-->
  <p :class="isUsed?'active':'text-danger'">样式绑定4</p><!--添加了样式,可以绑定多个值-->
</template>

<script>
export default {
  name: "Class",
  data(){
    return{
      isUsed:true,
      hasError:true,
      object:{
        isUsed:false,
        hasError:true,
      },
      arrActive:"text-danger"
    }
  }
}
</script>

<style scoped>
.active{
  color: red;
}
.text-danger{
  font-family: 宋体;
}
</style>
